<template>
    <div class="detail-comment-info" v-if="Object.keys(commentInfo).length !== 0">
        <div class="title">
            <div class="left">用户评价</div>
            <div class="more">更多</div>
            <!-- <i>kk</i> -->
        </div>
        <div class="logo">
            <img :src="commentInfo.user.avatar" alt="">
            <span>{{commentInfo.user.uname}}</span>
        </div>
        <p>{{commentInfo.content}}</p>

        <div class="goods-imgs">
            <span class="time">{{showDate}}</span>
            <span>{{commentInfo.style}}</span>
            <div class="imgs" v-if="commentInfo.images">
                <img :src="item" v-for="item in commentInfo.images" :key="item" alt="">
            </div>
        </div>
    </div>
</template>


<script>
export default {
    props: {
        commentInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    computed: {
        showDate() {
            const date = new Date(this.commentInfo.created * 1000)
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDay()
            return year + '-' + month + '-' + day
        }
    }
}
</script>

<style scoped>
    .title{
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        border-bottom: 2px solid #eee;
    }

    .title .left{
        margin-left: 5px;
    }

    .title .more{
        margin-right: 10px;
    }

    .logo{
        /* line-height: ; */
        margin: 12px;
    }
    .logo img{
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
    }

    p{
        margin: 12px;
    }

    .goods-imgs{
        margin: 12px;
    }

    .goods-imgs .time{
        margin-right: 8px;
    }

    .goods-imgs .imgs{
        display: flex;
        width: 100px;
        margin-top: 8px;
    }

    .goods-imgs .imgs img{
        width: 100%;
        margin: 0 4px;
    }
</style>